<template>
    <div class="song_form" >
        <div class="song_title">
            <div class="left_tj">
                <img src="../../static/img/aei.png" alt="">
                <span>推荐歌单</span>
            </div>
        </div>
        <div class="song_form_box">
            <ul>
                <li v-for='item in music' @click='bottom(item)'>
                    <img :src="item.coverImgUrl" alt="">
                    <p>{{item.name}}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                music:''
            }
        },
        created(){
            this.get()
        },
        methods:{
            get(){
                this.loading = true;
                this.$http.get('http://musicapi.duapp.com/api.php?type=topPlayList&cat=全部&offset=0&limit=18').then((res) => {
                    this.music = res.data.playlists;
                })
            },
            bottom(item){
                this.$emit('bottom',item)
            }
        }
    }
</script>

<style>
.song_form{
    width: 100%;
    /*background-color: pink;*/
    /*position: absolute;*/
    top: 185px;
}
.left_tj {
    width: 110px;
    height: 50px;
    /*background-color: greenyellow;*/
    position: relative;
}
.left_tj img {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -15px;
}
.left_tj span{
    display: inline-block;
    margin-left: 35px;
    line-height: 50px;
}
.song_form_box{
    width: 100%;
    /*height: 500px;*/
    /*background-color: greenyellow;*/
    overflow: hidden;
}
.song_form_box li{
    margin: 0;
    width: 30%;
    margin-left: 2.5%;
    margin-bottom: 2.5%;
    float: left;
}
.song_form_box li img{
    width: 100%;
}
.song_form_box li p{
    width: 100%;
    font-size: 15px;
    height: 40px;
    overflow: hidden;
}
</style>
